<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div v-if="isshow">
      <div class="search-item" v-for="lista in lists" :key="`list-${lista.id}`">
        <div class="search-item-left">
          <img :src="lista.img.replace('w.h','128.180')" alt="">
        </div>
        <div class="search-item-center">
          <p>{{ lista.nm.slice(0,10) }}</p>
          <p>{{ lista.enm }}</p>
          <p>{{ lista.cat }}</p>
          <p>{{ lista.rt }}</p>
        </div>
        <div class="search-item-right">
          <p>{{ lista.sc.toFixed(1) }}</p>
        </div>
      </div>
      <div class="search-footer" v-if="isshow">
        <p>查看全部{{total}}条数据</p>
      </div>
    </div>
    <div v-if="iserror" class="error">
      <img src="../assets/timg.gif" alt="">
      <p>兄弟别走，换个片儿名试试</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      lists: [],
      total: '',
      isshow: false,
      iserror: false
    }
  },
  methods: {
    onSearch (val) {
      this.$http.getsearch(val).then((resp) => {
        const { list } = resp.data.movies
        console.log(list)
        const total = resp.data.movies.total
        this.lists = list
        this.total = total
        this.iserror = false
        this.isshow = true
      }).catch(() => {
        this.iserror = true
        this.isshow = false
        console.log('出错啦', Error)
      })
    },
    onCancel () {
      this.isshow = false
      this.iserror = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search-item {
  width: 100%;
  height: 110px;
  margin: 5px 0;
  display: flex;
  &-left {
    width: 25%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-center {
    width: 61%;
    height: 100%;
    p{
      height: 18%;
      overflow: hidden;
      margin-left: 10px;
    }
    p+p{
      margin-top: 10px;
    }
    p:nth-of-type(1) {
      font-weight: bolder;
      width: 100%;
      font-size: 18px;
    }
    p:nth-of-type(2) {
      color: #666;
      width: 100%;
      font-size: 16px;
    }
    p:nth-of-type(3) {
      color: #666;
      width: 100%;
      font-size: 16px;
    }
    p:nth-of-type(4) {
      color: #666;
      width: 100%;
      font-size: 16px;
    }
  }
  &-right {
    width: 14%;
    height: 100%;
    p {
      margin-top: 14px;
      color: #fa0;
      font-size: 24px;
    }
  }
}
.search-footer {
  text-align: center;
  color: #ef4238;
  height: 44px;
  p {
    line-height: 44px;
    font-size: 18px;
  }
}
.error {
  width: 100%;
  text-align: center;
  margin-top: 20%;
  font-size: 25px;
}
</style>
